<template>
  <view class="entire">
    <view class="top">
      <view class="left">&ensp;{{ info.title }}</view>
    </view>
    <view class="bottom">
      <view class="left">{{ info.time }}</view>
      <view class="left">{{ info.content }}</view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  info: { type: Object, required: false },
})
</script>

<style scoped lang="scss">
.entire {
  width: 700rpx;
  min-height: 100rpx;
  background-color: white;
  border-radius: 15rpx;
  margin-top: 20rpx;
  margin-left: 10rpx;
  display: flex;
  flex-direction: column;
  .top {
    width: 700rpx;
    height: 50rpx;
    display: flex;
    .left {
      width: 600rpx;
      height: 50rpx;
      font-size: 26rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .bottom {
    width: 700rpx;
    height: 50rpx;
    .left {
      margin-left: 16rpx;
      width: 700rpx;
      height: 50rpx;
      display: flex;
      font-size: 23rpx;
      color: #898889;
    }
  }
}
</style>
